<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .router-link-active {
            background-color: rgb(200, 142, 40);
        }

        .news .router-link-exact-active {
            background-color: rgb(173, 75, 142);
        }
    </style>
</head>

<body>
<div id="app">
    <h2>开始学习路由</h2>
    <router-link tag="button" to="/home">到home</router-link>
    <router-link tag="button" to="/news">到新闻</router-link>
    <router-link :to="{path: '/about'}" tag="button">到关于我们</router-link>
    <router-link :to="{name: ' '}" tag="button">到关于我们</router-link>
    <!-- 定义 router-view组件 作为 路由组件出口 -->
    <router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    // 1 准备路由组件的 config对象
    const Home = {
        template: `
        <div>我是首页</div>
      `
    }
    const News = {
        template: `
        <div class="news">
          <h2>新闻页</h2>  
          <router-link to="/news/native">国内新闻</router-link>
          <router-link to="/news/abroad">国外新闻</router-link>
          <hr/>
          <router-view></router-view>
        </div>
      `
    }
    // 国内新闻
    const NativeNews = {
        template: `
        <div>我是国内新闻</div>
      `
    }
    // 国外新闻
    const AbroadNews = {
        template: `
        <div>我是国外新闻</div>
      `
    }
    const About = {
        template: `
        <div>我是关于我们页</div>
      `
    }

    const NotFound = {
        template: `
        <div>
          <h2 style="text-align:center">哦吼，404啦</h2>  
        </div>
      `
    }

    const routes = [
        // 单个路由规则 是一个对象 具有两个基础属性
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/news',
            name: 'news',
            component: News,
            children: [
                {
                    path: '/news',
                    redirect: '/news/native'
                },
                {
                    path: '/news/native',
                    name: 'nativeNews',
                    component: NativeNews
                },
                {
                    path: '/news/abroad',
                    name: 'abroadNews',
                    component: AbroadNews
                }
            ]
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            path: '*',
            component: NotFound
        }
    ]
    // 2 初始化 路由实例
    const router = new VueRouter({
        // 路由规则 数组
        routes
    });
    // 3 将路由 实例 挂载到 vm上
    const vm = new Vue({
        el: '#app',
        router
    })
</script>
</body>

</html>